import React from 'react';
import { connect } from 'dva';
import PropTypes from 'prop-types'
import { Table , Modal, Menu, Icon } from 'antd'
import Query from './Query'
import Toggles from '../../components/Toggles'
import styles from './index.less';
import classnames from 'classnames'
import { Link } from 'dva/router'
import DropOption  from '../../components/DropOption/DropOption'

const confirm = Modal.confirm

function List ({
  user: {
    list,
    load
  },
  onSearch,
  onDeleteItem,
  onEditItem,
  location
  }) {

  const handleMenuClick = (record, e) => {
    if (e.key === '1') {
      onEditItem(record)
    } else if (e.key === '2') {
      confirm({
        title: '您确定要删除这条记录吗?',
        onOk () {
          onDeleteItem(record.id)
        },
      })
    }
  }

  const columns = [
    {
      title: '头像',
      dataIndex: 'avatar',
      key: 'avatar',

      className: styles.avatar,
      render: (text) => <img alt={'avatar'} width={24} src={text} />,
    }, {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
      render: (text, record) => <Link to={`user/${record.id}`}>{text}</Link>,
    }, {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
    }, {
      title: '性别',
      dataIndex: 'sex',
      key: 'sex',
      render: (text) => <span>{text===1
            ? '男'
            : '女'}</span>,
    }, {
      title: '电话',
      dataIndex: 'phone',
      key: 'phone',
    }, {
      title: '行业',
      dataIndex: 'industry',
      key: 'industry',
    }, {
      title: '生日',
      dataIndex: 'birth',
      key: 'birth',
    }, {
      title: '邮箱',
      dataIndex: 'email',
      key: 'email',
    }, {
      title: '地址',
      dataIndex: 'address',
      key: 'address',
    }, {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
    }, {
      title: '操作',
      key: 'operation',

      render: (text, record) => {
        return <DropOption onMenuClick={e => handleMenuClick(record, e)} menuOptions={[{ key: '1', name: '修改' }, { key: '2', name: '删除' }]} />
      },
    },
  ]

  return (
    <div className="content-inner">
      <Toggles name='查询条件'>
        <Query onOk={onSearch} />
      </Toggles>
      <Table
        pagination={{
          showSizeChanger: true,
          showQuickJumper: true,
          showTotal: total => `共 ${total} 条`,
        }}
        loading={load}
        dataSource={list}
        //className={classnames({ [styles.table]: true, [styles.motion]: true })}
        className = {styles.table}
        bordered
        simple
        rowKey={record => record.id}
        columns={columns}
      />
    </div>
  );
}

List.propTypes = {
  user: PropTypes.object.isRequired,
  onDeleteItem: PropTypes.func.isRequired,
  onEditItem: PropTypes.func.isRequired
};

export default List;
